import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
export default function RingChart({ percent }) {
    const chartRef = useRef(null)
    useEffect(() => {
        function renderChart() {
            const myChart = echarts.init(chartRef.current);
            const option = {
                title: [
                    {
                        text: '占比',
                        textStyle: {
                            color: '#1C1F23',
                            fontSize: '10px',
                            fontWeight: 'normal',
                            lineHeight: 12,
                        },
                        subtext: (percent / 100 * 100).toFixed(0) + '%',
                        subtextStyle: {
                            color: '#1C1F23',
                            fontSize: '12px',
                            lineHeight: 12,
                            fontWeight: '600',
                        },
                        itemGap: 3,
                        left: 'center',
                        top: '20%'
                    }
                ],
                series: {
                    name: '',
                    type: 'pie',
                    radius: ['80%', '100%'],
                    center: ['50%', '50%'],
                    silent: true,
                    clockwise: true,
                    startAngle: 90,
                    label: {
                        show: false,
                    },
                    data: [
                        {
                            value: percent,
                            itemStyle: {
                                normal: {
                                    color: '#165DFF'
                                }
                            }
                        },
                        {
                            value: 100 - percent,
                            label: {
                                normal: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                // 圆环底色
                                normal: {
                                    color: '#CBE7FE'
                                }
                            }
                        }
                    ]
                },
            }
            option && myChart.setOption(option);
        }
        renderChart()
    }, [percent])
    return (
        <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
    )
}
